<template >
  <div>
    <div class="header-bg">
      <ul class="head">
        <li class="head-img"><img :src="imgSrc" alt="" mode="widthfix"></li>
        <li>策划技术工程师</li>
        <li>收货人：高经理</li>
      </ul>
      <ul class="nav">
        <li v-for="(item,index) in navs" @click="navClick()">
          <i class="icon50 iconfont" :class="item.img"></i>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <div class="hr"></div>
    <ul class="main">
      <li v-for="item in mainList">
        <navigator :url="item.url" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
          <div class="weui-cell__hd">
            <img :src="item.icon" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></img>
          </div>
          <div class="weui-cell__bd">{{item.title}}</div>
          <div class="weui-cell__ft weui-cell__ft_in-access"></div>
        </navigator>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        imgSrc: '',
        navs: [
          {
            img: 'icon-icon2',
            title: '待发货'
          },
          {
            img: 'icon-daifukuan',
            title: '待付款'
          },
          {
            img: 'icon-dingdan',
            title: '失效订单'
          },
          {
            img: 'icon-daipingjia20',
            title: '待评价'
          },
          {
            img: 'icon-yiwancheng',
            title: '已完成'
          },
          {
            img: 'icon-dingdan',
            title: '失效订单'
          },
          {
            img: 'icon-daipingjia20',
            title: '待评价'
          },
          {
            img: 'icon-yiwancheng',
            title: '已完成'
          }
        ],
        isClick: 0,
        mainList: [
          {
            url: '/pages/my/main',
            icon: require('./my_1.png'),
            title: '购物车'
          },
          {
            url: '/pages/address/main',
            icon: require('./my_2.png'),
            title: '我的地址'
          },
          {
            url: '/pages/service/main',
            icon: require('./my_3.png'),
            title: '联系电话'
          }
        ]
      }
    },
    methods: {
      navClick (index) {
        this.isCheck = index
      }
    },
    mounted () {
      this.imgSrc = require('./goods1.png')
    }
  }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .header-bg{
    width: 750rpx;
    height: 612rpx;
    background: url("./my1.png") no-repeat;
    .head{
      display: flex;
      flex-direction: column;
      height: 300rpx;
      font-size: 24rpx;
      color: #fff;
      justify-content:center;
      align-items:center;
      .head-img{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        border: 1rpx solid #fff;
        img{
          width: 100rpx;
          height: 100rpx;
          border-radius: 50rpx;
        }
      }
    }
    .nav{
      display: flex;
      flex-direction: row;
      flex-wrap:wrap;
      height: 312rpx;
      padding: 0 25rpx;
      font-size: 24rpx;
      color: #999;
      align-items:center;
      li{
        width: 140rpx;
        text-align: center;
        &:active{
          color: #E93B3D;
        }
        .icon50{
          font-size: 50rpx;
        }
      }
    }
  }
  .hr{
    width: 750rpx;
    height: 30rpx;
    background: #f8f8f8;
  }
  .main{
    height: calc(100vh - 642rpx);
    font-size: 28rpx;
    overflow-y: scroll;
    .weui-cell{
      padding: 20rpx 0;
      margin: 0 30rpx;
      border-bottom: 1rpx solid #D7D6DC;
    }
  }
</style>
